<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">

</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">
    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">添加用户</h1>
          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">添加用户</li>
            </ol>
          </div>

        </div>

      </div>

    </div>

    <!-- 主题内容正文 -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-4">

            <div class="card card-primary">
              <!-- 卡片头部 -->
              <div class="card-header">
                <h3 class="card-title">添加用户</h3>
              </div>

              <!-- 表单开始 -->
              <form>
                <div class="card-body">

                    <div class="form-group">
                      <label for="username">用户名</label>
                      <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                    </div>

                    <div class="form-group">
                      <label for="password">密码</label>
                      <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>

                    <div class="form-group">
                      <label for="repassword">确认密码</label>
                      <input type="password" class="form-control" id="repassword" name="repassword" placeholder="确认密码">
                    </div>

                    <div class="form-group">
                      <label for="tel">用户手机号</label>
                      <input type="text" class="form-control" id="tel" name="tel" placeholder="用户手机号">
                    </div>

                    <div class="form-inline">
                      <div class="form-group">
                        <label for="verifycode">验证码</label>
                        <input type="text" style="margin: 15px;" class="form-control" id="verifycode" name="verifycode" placeholder="手机验证码">
                      </div>
                      <div class="form-group">
                        <button type="button" class="btn btn-success" id="verifycode_btn">发送验证码</button>
                      </div>
                    </div>

                    <div class="form-group">
                      <div class="form-group">
                        <label for="roleId">角色</label>
                        <select class="form-control" id="roleId" name="roleId">
                        </select>
                      </div>
                    </div>

                </div>
                <input type="hidden" id="deleted_id" name="deleted" value="0" />
                <!-- 添加按钮 -->
                <div class="card-footer">
                  <button type="button" class="btn btn-primary" id="add_btn">添加</button>
                </div>
              </form>

            </div>

          </div>

          <div class="col-lg-6">
          </div>

        </div>

      </div>

    </div>

  </div>


  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
  </aside>

  <!-- 版权信息 -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2021 <a href="http://www.chengzhouyun.com/" target="_blank">ChengZhouYun</a>.</strong> All
    rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>

</div>


<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard3.js"></script>
</body>
<script th:inline="javascript">

  function isOnlyPhoneNumber(val){
    var regPos =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
    if(regPos.test(val)){
      return true;
    }else {
      return false;
    }
  }

  // 4位验证码检测
  function isVerifyCode(val) {
    var regPos = /\w{4}$/;
    if(regPos.test(val)){
      return true;
    }else {
      return false;
    }
  }

  function isEmptyNull(value){
    if (value == undefined || value == null || value =="") {
      return false;
    }
    return true;
  }

  $(function(){

    // 登录的角色是管理员的情况下在做请求
    const r_role_id = /*[[${#httpSession.getAttribute('role_id')}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
    if (r_role_id == 1) {
      // 是管理员的情况下请求所有角色列表
      $.get("/role/role/list", function (data) {
        // 取用户下拉框
        var select = document.getElementById("roleId");
        // 情况下拉框中的option
        var arr_option = select.options;
        // 先清除在添加
        for (var i = arr_option.length - 1; i >= 0; i--) {
          arr_option.remove(i);
        }
        // 数据状态码为200通过
        if (data.statusCode == 200) {
          // 取到list数据集合
          var list = data.list;
          // forEach遍历
          list.forEach(function (item) {
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值用户id给value
            option.value = item.id;
            // 赋值用户名给内容
            option.innerHTML = item.name;
            // 添加到select中
            select.append(option);
          })
        }
      })
    } else {
      // 不是管理员请求企业角色
      // 是管理员的情况下请求所有角色列表
      $.get("/role/role/2", function (data) {
        // 取用户下拉框
        var select = document.getElementById("roleId");
        // 情况下拉框中的option
        var arr_option = select.options;
        // 先清除在添加
        for (var i = arr_option.length - 1; i >= 0; i--) {
          arr_option.remove(i);
        }
        // 数据状态码为200通过
        if (data.statusCode == 200) {
          // 取到list数据集合
          var list = data.list;
          // forEach遍历
          list.forEach(function (item) {
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值用户id给value
            option.value = item.id;
            // 赋值用户名给内容
            option.innerHTML = item.name;
            // 添加到select中
            select.append(option);
          })
        }
      })
    }

    // 保存按钮事件
    $("#add_btn").on("click",function (event) {
      var formData = new FormData();

      if(!isEmptyNull($("#username").val())){
        alert("请填写用户名")
        return;
      }
      if(!isEmptyNull($("#password").val())){
        alert("请填写密码")
        return;
      }
      if(!isEmptyNull($("#repassword").val())){
        alert("请填写确认")
        return;
      }
      if(!isEmptyNull($("#roleId").val())){
        alert("请选择角色")
        return;
      }
      if(!isEmptyNull($("#tel").val())){
        alert("请填写手机号")
        return;
      }
      if(!isOnlyPhoneNumber($("#tel").val())){
        alert("填写手机号格式不正确")
        return;
      }
      if(!isEmptyNull($("#verifycode").val())){
        alert("请填写手机验证码")
        return;
      }

      if(!isVerifyCode($("#verifycode").val())){
        alert("验证码位数不正确")
        return;
      }

      formData.username = $("#username").val();
      formData.repassword = $("#repassword").val();
      formData.password = $("#password").val();
      formData.roleId = $("#roleId").val();
      formData.phoneverifycode = $("#verifycode").val();
      formData.tel = $("#tel").val();
      formData.jltj = 0;
      formData.deleted = $("#deleted_id").val();

      $.ajax({
        url: "/usr/user",
        type: "post",
        data: JSON.stringify(formData),
        contentType: "application/json",
        async: false,
        dataType: "json",
        success: function (res) {

          if (res.statusCode == 200) {
            alert(res.message);
            // 跳转页面
            location.href = "/page/UserInfo";
          } else {
            alert(res.errorMsg);
          }
        }
      })
    })



    $("#verifycode_btn").on("click",function(){
      if(!isEmptyNull($("#tel").val())){
        alert("请填写手机号")
        return;
      }

      if(!isOnlyPhoneNumber($("#tel").val())){
        alert("手机号码格式不对");
        return;
      }

      $.ajax({
        url:"/phoneverifycode?phoneNumber="+$("#tel").val(),
        type:"GET",
        dataType:"json",
        success: function(res){
          // console.log(res)
          if(res.statusCode == 200) {
            alert("验证码已发送,请尽快填写")
          } else{
            alert(res.errorMsg);
          }
        }
      })


      // 禁用按钮
      $("#verifycode_btn").attr("disabled","disabled");

      var i = 30;
      var timeout = setInterval(function(){
        i--;
        $("#verifycode_btn").text(i+"秒")
        console.log("定时器运行了")
        if(i == 0){
          console.log("定时器停止了")
          // 启用按钮
          $("#verifycode_btn").removeAttr("disabled");
          // 设置内容
          $("#verifycode_btn").text("重新发送");
          clearInterval(timeout);
        }
      },1000)

    })

  })

</script>
</html>
